import React, {useState} from 'react'

// 自定义hook
const useInput = () => {
  // 定义变量，对应输入框的值
  let [value, setValue] = useState('')
  return {
    // 返回值是对象，分别是数据本身和修改数据的函数
    value: value,
    onChange: (e)=>setValue(e.target.value)
  }
}

export default function From() {
  // let [name, setName] = useState('')
  // let [pwd, setPwd] = useState('')
  // let {...name} = useInput()
  // 通过对象的解构赋值，接收hook中的返回值
  let {...pwd} = useInput()
  let name = useInput()
  console.log(111, name);
  const login = ()=>{
    console.log(name.value, pwd.value); 
  }
  const {...a} = {rules: 'aa', rrrr: 'bb'}
  return (
    <div>
      <h1>欢迎登录</h1>
      {/* <input placeholder="用户名" value={name} onChange={(e)=>setName(e.target.value)}></input>
      <br></br>
      <input placeholder="密码" value={pwd} onChange={(e)=>setPwd(e.target.value)}></input> */}
      {/* <input placeholder="用户名" {...name}></input> */}
      {/* 31和33行是等价写法，但是31行简单，因为使用了ES6的对象结构 */}
      <input placeholder="用户名" value={name.value} onChange={name.onChange}></input>
      <br></br>
      <input placeholder="密码" {...pwd} {...a}></input>
      <br></br>
      <br></br>
      <button onClick={()=>login()}>登录</button>
    </div>
  )
}
